<!-- 兼容uploadX组件，这个修改样式更加灵活 -->
<template>
  <div class="uploadX2">
    <!-- 还是使用element-plus -->
    <el-upload ref="uploadDom" :auto-upload="false" :on-change="changeFn"
               action="#" :accept="props.accept" list-type="picture-card"
               :drag="props.dragAdd"
               class="uploadInputClass" :multiple="props.multiple">
      <div ref="chooseBnDom" >选择</div>
    </el-upload>
    <div class="uploadFileList" v-if="!(props.noAdd && props.noDel && props.noLook)">
      <!-- 查看列表 -->
      <slot name="fileList">
        <watch-file-x v-model:list="nowFileList" @change="fileChangeFn"
                      :no-look="props.noLook" :width="props.width"
                      :height="props.height" :group-name="props.groupName"
                      :disabled="!props.draggable"
                      :all-img="props.allImg" :no-del="props.noDel">
          <template #draggMore>
            <!-- 添加按钮 -->
            <div class="chooseBox">
              <slot name="button">
                <div class="addIcon" @click="chooseFile" v-if="showAddIcon">
                  <iconX type="Plus" size="30"/>
                </div>
              </slot>
            </div>
          </template>
        </watch-file-x>
      </slot>
    </div>

  </div>
</template>

<script setup>
import {ref, computed, watch, onMounted} from 'vue'
import IconX from './xhykIcon.vue'
import WatchFileX from "./xhykWatchFile.vue";
import { ElUpload } from 'element-plus'

const props = defineProps({
  list: {
    type: Object,
    default: []
  },
  // 文件类型
  accept: {
    type: String,
    default: 'image/*,video/*'
  },
  // 支持多选
  multiple: {
    type: Boolean,
    default: true
  },
  // 选择前函数。
  // 如果超过数量范围。需要某些图片是固定的，替换其他新的，手动判断改变列表之后，返回false
  beforeFn: {
    type: Function,
    default: undefined
  },
  // 是否预览全部图片
  allImg: {
    type: Boolean,
    default: false
  },
  // 不显示添加按钮
  noAdd: {
    type: Boolean,
    default: false
  },
  // 不显示删除
  noDel: {
    type: Boolean,
    default: false
  },
  // 不显示预览
  noLook: {
    type: Boolean,
    default: false
  },
  // 上传最大数量
  limit: {
    type: [Number, String],
    default: 100
  },
  // 到达最大数量时是否不显示添加图标
  limitNoAdd: {
    type: Boolean,
    default: false
  },
  // 到达最大数量后，再添加时的操作
  limitAdd: {
    type: [String, Number],
    // 0：不再添加。1：添加新的，去掉旧的
    default: 0
  },

  // 图框宽
  width: {
    type: [String, Number],
    default: '146'
  },

  // 图框高
  height: {
    type: [String, Number],
    default: '146'
  },

  // 允许拖拽放进
  // dragAdd: {
  //   type: Boolean,
  //   default: false
  //  },

  // 拖拽分组名
  groupName: {
    type: String,
    default: "uploadWatchDraggX"
  },

  // 允许拖拽改变排序
  draggable: {
    type: Boolean,
    default: true
  },
})

const emit = defineEmits(['update:list','change'])

// 文件输入框
const uploadDom = ref({})
const chooseBnDom = ref({})
const chooseFile = () => {
  chooseBnDom.value.click()
}


// 宽高
const widthD = computed(() => {
  let result = props.width
  if (typeof result == 'string') {
    result = result.toLowerCase()
    if (!result.includes('px') && !result.includes('%') &&
        !result.includes('vh') && !result.includes('auto') &&
        !result.includes('vw')) {
      result = `${result}px`
    }
  } else {
    result = `${result}px`
  }
  return result
})

const heightD = computed(() => {
  let result = props.height
  if (typeof result == 'string') {
    result = result.toLowerCase()
    if (!result.includes('px') && !result.includes('%') &&
        !result.includes('vh') && !result.includes('auto') &&
        !result.includes('vw')) {
      result = `${result}px`
    }
  } else {
    result = `${result}px`
  }
  return result
})


// 当前文件列表
const nowFileList = ref([])
watch(() => props.list, row => {
  let tempList = row || []
  nowFileList.value = []
  // 不直接赋值，防止内存地址指向
  tempList.forEach((item) => {
    if (nowFileList.value.length < parseInt(props.limit)) {
      nowFileList.value.push(item)
    } else {
      // 超出范围了
      if (props.limitAdd == 1) {
        nowFileList.value.shift()
        nowFileList.value.push(item)
      }
      emit("update:list", nowFileList.value)
    }
  })
}, {immediate: true, deep: true})


// 文件列表发生改变
const fileChangeFn = (list) => {
  emit("update:list", list)
}


// upload组件的改变函数
const changeFn = async file => {
  let isOk = true
  if (props.beforeFn) {
    isOk = await props.beforeFn(file)
  }
  if (isOk) {
    if (nowFileList.value.length < parseInt(props.limit)) {
      nowFileList.value.push(file)
    } else {
      // 超出范围了
      if (props.limitAdd == 1) {
        nowFileList.value.shift()
        nowFileList.value.push(file)
      }
    }
    emit("change",file)
    emit('update:list', nowFileList.value)
  }
}

// 显示添加图片
const showAddIcon = computed(() => {
  if (props.noAdd == true) {
    return false
  }

  // 如果到达最大数量
  if (nowFileList.value.length >= parseInt(props.limit)) {
    if (props.limitNoAdd == true) {
      return false
    }
  }


  return true

})


defineExpose({
  open: chooseFile
})

</script>

<style scoped lang='scss'>
.uploadX2 {
  height: 100%;
  width: 100%;
}

// 默认的item类名
$whValue: 146px;

.uploadFileList {
  display: inline-block;
  width: 100%;
  height: 100%;
  vertical-align: middle;

  .chooseBox {
    width: auto;
    height: auto;
    display: inline-block;
    vertical-align: top;
    margin: 6px;
  }

  .fileList {
    display: inline-block;
  }
}

.addIcon {
  width: v-bind(widthD);
  height: v-bind(heightD);
  border: 1px dashed #DCDFE6;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  cursor: pointer;

  &:hover {
    color: #409EFF;
    border: 1px dashed #409EFF;
  }
}


.uploadInputClass {
  display: none;
}

// 文件列表
.fileList {
  display: inline-block;
}
</style>